<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="彭俊超">
    <title>复杂轮播图</title>
    <style>
        *{
            box-sizing: border-box;
        }
        ul{
            margin:0px;
            padding:0px;
            list-style: none;
        }
         .box{
             margin:100px auto;
             width:520px;
             height:280px;
             position:relative;
         }
         .img-list li{
            position:absolute;
            display: none;
         }
         .img-list .current{
             display: block;
         }
         .indicator{
             width:100%;
             position:absolute;
             left:0px;
             bottom:20px;
             display: flex;
             justify-content: center;
             color:white;
         }
         .indicator li{
             width:20px;
             height:20px;
             background-color:#aaa;
             text-align: center;
             line-height:20px;
             margin:0px 5px;
             border-radius: 50%;
             cursor: pointer;
         }
         .indicator li.active{
             background-color:red;
         }
         .img-click span{
             width:30px;
             height:40px;
             line-height: 40px;
             text-align: center;
             color:white;
             position: absolute;
             background-color: rgba(0, 0, 0, 0.1);
             top:calc(50% - 20px);
         }
         .img-click span:hover{
             background-color:coral;
             cursor: pointer;
         }
         .img-click .prev{
             left:0;
         }
         .img-click .next{
             right:0;
         }
    </style>
</head>

<body>
<div class="box">
    <ul class="img-list">
        <li class="current"><a href="#"><img src="img/01.jpg" alt=""></a></li>
        <li><a href="#"><img src="img/02.jpg" alt=""></a></li>
        <li><a href="#"><img src="img/03.jpg" alt=""></a></li>
        <li><a href="#"><img src="img/04.jpg" alt=""></a></li>
        <li><a href="#"><img src="img/05.jpg" alt=""></a></li>
    </ul>
    <ul class="indicator">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div class="img-click">
        <span class="prev">&lt;</span>
        <span class="next">&gt;</span>
    </div>
</div>
</body>

</html>
<script>
    window.onload = function(){
    // 第一步：找标签
    var box = document.querySelector('.box');
    var imgLis = document.querySelectorAll('.img-list li');
    var indicatorLis = document.querySelectorAll('.indicator li');
    var prev = document.querySelector('.prev');
    var next = document.querySelector('.next');
    var index = 0;  //记录当前图片的索引值
    // 上一张
    function prevImg(){
        index = index == 0 ? index = imgLis.length - 1 : index - 1;
        showImg();
    }
    // 下一张
    function nextImg(){
        index = index == imgLis.length - 1 ? 0 : index + 1;
        showImg();
    }
    // 展示图片
    function showImg(){
        for(var i = 0;i < imgLis.length;i++){
            imgLis[i].className = '';
            indicatorLis[i].className = '';
        }
        console.log(index);
        imgLis[index].className = 'current';
        indicatorLis[index].className = 'active';  
    }
    // 1.自动切换的图片
    var timer = setInterval(nextImg,1000);

    // 2.图片跟随指示灯切换
    for(var i = 0; i < indicatorLis.length;i++ ){
        indicatorLis[i].index = i;
        indicatorLis[i].onmouseover = function(){
            // 鼠标进来，暂停自动切换
            clearInterval(timer);
            // 根据鼠标选中的指示灯的索引值来切换图片
            // 并记录更新index的值
            index = this.index;
            showImg();
        }
        indicatorLis[i].onmouseout = function(){
            // 鼠标出去，开始自动切换
            timer = setInterval(nextImg,1000);
        }
    }
    // 3.点击按钮切换
    box.onmouseover = function(){
        clearInterval(timer);
        timer = null;
        prev.style.display = 'block';
        next.style.disp;ay = 'block';
    }
    box.onmouseout = function(){
        if(timer) return;
        timer = setInterval(nextImg,1000);
        prev.style.display = 'block';
        next.style.disp;ay = 'block';
    }
    // 点击 上一张
    prev.onclick = function(){
        prevImg();
    }
    // 点击 下一张
    next.onclick = function(){
        nextImg();
    }
}
</script>